<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>无刷新分页</title>
    <style>
            body{background:#eee;margin:0}
            .box{width:800px;margin:0 auto;background:#fefefe;border-radius:8px;padding:20px;box-sizing:border-box;margin-top:40px}
            .title{font-family:'Microsoft YaHei';color:#666;font-size:24px;text-align:center;margin:10px 0}
            .comment ul{margin:0;padding:10px;list-style:none;border-bottom:1px solid #ccc}
            .comment li{line-height:32px}
            .pagelist{margin-top:20px;text-align:center}
            .pagelist span{margin:0 2px}
            .pagelist button{padding:6px 10px;cursor:pointer}
            .pagelist button:disabled{cursor:default}
            .progress div{width:0%;height:1px;position:fixed;top:0;background-color:#38f;box-shadow:1px 1px 1px #6bf;transition: all 0.8s}
          </style>
</head>
<body>
  <h2>无刷新分页</h2>
        <div id="progress" class="progress"></div>
        <div class="box">
          <div class="title">查看商品评论</div>
          <div id="comment" class="comment"></div>
          <div class="pagelist">
            <p>当前是第<span id="page_num">1</span>页</p>
            <button id="page_first">首页</button>
            <button id="page_prev">上一页</button>
            <button id="page_next">下一页</button>
            <button id="page_last">尾页</button>
          </div>
        </div>
        <script>
          (function() {
            function PageList(options) {
              for (var i in options) {
                this[i] = options[i];
              }
              var obj = this;
              this.first.onclick = function() {
                obj.page = 1;
                obj.onChange();
              };
              this.prev.onclick = function() {
                obj.page = (obj.page > 1) ? (obj.page - 1) : 1;
                obj.onChange();
              };
              this.next.onclick = function() {
                obj.page = (obj.page >= obj.maxPage) ? obj.maxPage : (obj.page + 1);
                obj.onChange();
              };
              this.last.onclick = function() {
                obj.page = obj.maxPage;
                obj.onChange();
              };
            }
            PageList.prototype.updateStatus = function() {
              this.first.disabled = (this.page <= 1);
              this.prev.disabled = (this.page <= 1);
              this.next.disabled = (this.page >= this.maxPage);
              this.last.disabled = (this.page >= this.maxPage);
              this.pageNum.innerHTML = this.page;
            };
            function Comment(obj) {
              this.obj = obj;
            }
            Comment.prototype.ajax = function(url, start, complete) {
              var xhr = new XMLHttpRequest();
              xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                  if (xhr.status < 200 || xhr.status >= 300 && xhr.status !== 304) {
                    alert('服务器异常');
                    return;
                  }
                  try {
                    var obj = JSON.parse(xhr.responseText);
                  } catch(e) {
                    alert('解析服务器返回信息失败');
                    return;
                  }
                  complete(obj);
                }
              };
              xhr.open('GET', url);
              xhr.send();
              start();
            };
            Comment.prototype.create = function(data) {
              var html = '';
              for (var i in data) {
                html += '<ul><li>用户名：' + data[i].user + '　发表时间：' + data[i].time + '</li>';
                html += '<li>' + data[i].content + '</li></ul>';
              }
              this.obj.innerHTML = html;
            };
            function ProgressBar(container) {
              this.container = container;
              this.div = document.createElement('div');
              this.container.appendChild(this.div);
            }
            ProgressBar.prototype.show = function() {
              this.div.style.width = '70%';
            };
            ProgressBar.prototype.complete = function() {
              var div = this.div;
              var container = this.container;
              div.style.width = '100%';
              setTimeout(function() {
                div.style.opacity = 0;
                setTimeout(function() {
                  container.removeChild(div);
                }, 300);
              }, 500);
            };
            var QueryString = {
              get: function() {
                return location.search.substr(1);
              },
              set: function(str) {
                history.pushState(null, null, '?' + str);
              },
              find: function(name) {
                var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
                var r = this.get().match(reg);
                return r ? unescape(r[2]): null;
              },
              getPage: function() {
                var page = parseInt(this.find('page'));
                return (isNaN(page) || (page < 1)) ? 1 : page;
              }
            };
            var comment = new Comment(document.getElementById('comment'));
            var progressBar;
            var progressContainer = document.getElementById('progress');
            var pageList = new PageList({
              page: QueryString.getPage(),
              maxPage: 1,
              first: document.getElementById('page_first'),
              prev: document.getElementById('page_prev'),
              next: document.getElementById('page_next'),
              last: document.getElementById('page_last'),
              pageNum: document.getElementById('page_num'),
              onChange: function() {
                comment.ajax('data.php?page=' + this.page, function() {
                  progressBar = new ProgressBar(progressContainer);
                  progressBar.show();
                }, function(obj) {
                  pageList.maxPage = obj.maxPage;
                  pageList.updateStatus();
                  comment.create(obj.data);
                  QueryString.set('page=' + pageList.page);
                  progressBar.complete();
                });
              }
            });
            pageList.onChange();
          })();
        </script>
        
    <p><a href="default.html">返回目录</a></p>
    <p><a href="第十章.html">返回第十章</a></p>
    <p><a href="进度条文件上传.html">下一题</a></p>
    <p><a href="第十一章.html">下一章</a></p>
      </body>
    </html>
    
